<template>
  <div class="lottery-container">
    <div class="lottery-item" v-for="(lottery, index) in lotteries" :key="index">
      <h2 class="lottery-title">{{ lottery.phase }}</h2>
      <div class="lottery-numbers">
        <span class="lottery-number">{{lottery.red1}}</span>
        <span class="lottery-number">{{lottery.red2}}</span>
        <span class="lottery-number">{{lottery.red3}}</span>
        <span class="lottery-number">{{lottery.red4}}</span>
        <span class="lottery-number">{{lottery.red5}}</span>
        <span class="lottery-number">{{lottery.red6}}</span>
        <span class="lottery-number" style="background-color: #2e9aff">{{lottery.blue}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed,onMounted } from 'vue'
import {ballApi} from "../../api/business/ball/ball-api";
export default {
  setup() {
    const lotteries = ref([
      {
        "id": 2634,
        "phase": 24051,
        "red1": 5,
        "red2": 9,
        "red3": 13,
        "red4": 20,
        "red5": 23,
        "red6": 28,
        "blue": 6
      },
      {
        "id": 2633,
        "phase": 24050,
        "red1": 1,
        "red2": 3,
        "red3": 7,
        "red4": 10,
        "red5": 22,
        "red6": 33,
        "blue": 2
      },
      // ...其他彩票信息
    ])

    // 格式化金钱的函数（可选）
    const formatMoney = (value) => {
      return `￥${value.toLocaleString('zh-CN', { style: 'currency', currency: 'CNY' })}`
    }

    // 返回一个computed属性（如果需要的话）
    const formattedPrizes = computed(() => {
      return lotteries.value.map(lottery => ({
        ...lottery,
        formattedPrize: formatMoney(lottery.prizePerTicket)
      }))
    })
    onMounted(()=>{
      ballApi.doubleColorBall().then(res =>{
        if(res.ok){
          lotteries.value = res.data;
        }
      });
    });
    // 如果你使用computed属性，则可以在模板中使用formattedPrizes

    return {
      lotteries,
      formatMoney
    }
  }
}
</script>

<style scoped>
.lottery-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lottery-item {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  width: 80%;

}

.lottery-title {
  text-align: left;
  font-size: 18px;
  padding-left: 8px;
  margin-bottom: 10px;
}

.lottery-numbers {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.lottery-number {
  display: inline-block;
  padding: 5px 5px;
  margin: 0 8px;
  background-color: #ff3924;
  /* Set width and height equal for a circle */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 20px;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  color: white;
}

</style>
